<template>
  <div class>
    <!-- <div class="iqoo">
      <img
        src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/20200212/6f5727b7fdf22b5a15d5f81490e118d0.svg"
        alt
      />
      <p>
        <a href class="speed">定义新速度</a>
      </p>
      <p>
        <a
          href
          style="color:#ccc;font-size:20px;
              margin-bottom: 100px;display: block;"
        >新品发布会 | 02.25</a>
      </p>
      <p>
        <a href class="xiangqing">查看详情&nbsp;></a>
      </p>
    </div>-->
    <!-- banner -->
    <div id="banner-wrap">
      <div class="banner">
        <div class="banner_imgbox">
          <a href="#">
            <img
              width="100%"
              height="700px"
              src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/1596027081684/images/banner-large-1.jpg"
              alt
            />
          </a>
        </div>
      </div>

      <!-- 小点 -->
      <ul class="thumb_list">
        <li>
          <span></span>
        </li>
      </ul>
      <div class="iqoo">
        <img
          src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/1596027081684/images/s7-logo.svg"
          alt
        />
        <p>
          <a href class="speed">定义新速度</a>
        </p>
        <p>
          <a
            href
            style="color:#ccc;font-size:20px;
              margin-bottom: 100px;display: block;"
          >新品发布会 | 02.25</a>
        </p>
        <p>
          <a href class="xiangqing">查看详情&nbsp;></a>
        </p>
      </div>
    </div>
    <!-- 主体start -->
    <div class="main">
      <div class="main_top">
        <div class="top1">
          <span>以旧换新</span>
          <p>高价回收 安全无忧</p>
        </div>
        <div class="top2">
          <span>图文镭雕</span>
          <p>让你的手机与众不同</p>
        </div>
      </div>
      <div class="main_center">
        <div class="z6">
          <img
            src="https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/20200219/fad314ed42bdd529c0e9c1808055712a.svg"
            alt
          />
          <p>
            <a href class="speeds">5G性能先锋</a>
          </p>
          <p>
            <a
              href
              style="color: #959595;font-size:20px;
                margin-bottom: 100px;display: block;"
            >预约抽千元大奖</a>
          </p>
          <p>
            <a href class="xiangqings">立即前往&nbsp;></a>
          </p>
        </div>
      </div>
      <div class="main_foot">
        <div class="foot1">
          <span>vivo TWS Neo 真无线耳机</span>
          <p>新品首发</p>
        </div>
        <div class="foot2">
          <span>超感光微云台</span>
          <p>X50系列深度评测</p>
        </div>
        <div class="foot3">
          <span>Y9s 5重超质感美颜</span>
          <p>赠耳机 | 4800万全场景四摄</p>
        </div>
        <div class="foot4">
          <span>时尚与众不同</span>
          <p>vivo S5照亮你的美</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data() {
    return {
      name: [],
    };
  },
  created() {
    // this.test();
  },
  methods: {
    test() {
      axios
        .get("/specie")
        .then((res) => console.log(res))
        .catch((err) => console.log(err));
    },
  },
};
</script>


<style  scoped>
.iqoo {
  width: 208px;
  position: absolute;
  top: 239px;
  left: 168px;
}

.iqoo img {
  width: 208px;
  height: 56px;
  margin-bottom: 40px;
}

.speed {
  display: block;
  font-size: 30px;
  color: #000;
  margin-bottom: 20px;
}

.xiangqing {
  display: block;
  font-size: 20px;
  color: #000;
}
.main {
  width: 100%;
}

.main_top {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.top1,
.top2 {
  height: 540px;
  width: 756px;
  float: left;
  text-align: center;
  padding: 30px 0 0 0 ;
}
.top1,.top2 span{
  color:#fff;
  
}
.top1,
.top2 {
  background: url(https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/20191212/aed51afdbcaf79807eb11b09a3ea5764.jpg_w2554-h1080.jpg)
    no-repeat center;
  background-size: cover;
}

.top2 {
  margin-left: 7px;
  background-image: url(https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/20191216/987fc79f287fad3e94966aa0c257121e.jpg_w2554-h1080.jpg);
}
s .main_top span {
  display: block;
  color: #fff;
  font-size: 25px;
  margin-top: 55px;
  margin-bottom: 15px;
}

.main_top p {
  color: #ccc;
  font-size: 18px;
}

.main_center {
  width: 100%;
  height: 700px;
  position: relative;
  background: url(https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/20200219/a9448ea0bfcd7a263debdff5b3cd1793.jpg_w2560-h700.jpg)
    no-repeat center;
}

.z6 {
  width: 208px;
  position: absolute;
  top: 190px;
  left: 168px;
}

.z6 img {
  width: 208px;
  height: 56px;
  margin-bottom: 40px;
}

.speeds {
  display: block;
  font-size: 30px;
  color: #000000;
  margin-bottom: 20px;
}

.xiangqings {
  display: block;
  font-size: 20px;
  color: #000000;
}
.main_foot {
  overflow: hidden;
}
.foot1,
.foot2,
.foot3,
.foot4 {
  height: 580px;
  width: 379px;
  float: left;
  text-align: center;
  text-align: center;
}

.foot1 {
  background: url(https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/20200525/0224536307f8f15a81eb5df8efc4e9b4.png_w1250-h990.png)
    no-repeat center;
  background-size: cover;
}

.foot2 {
  background: url(https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/20200728/f103b15b908d8da8d975ea80a2d21c7b.jpg_w1250-h990.jpg)
    no-repeat center;
  background-size: cover;
}

.foot3 {
  background: url(https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/20191204/2fc739ab0c2d38712a689cde4072d810.png_w1250-h990.png)
    no-repeat center;
  background-size: cover;
}

.foot4 {
  background: url(https://wwwstatic.vivo.com.cn/vivoportal/files/image/home/20200218/2a20cfc640d05934644f7acc54836472.jpg_w1250-h990.jpg)
    no-repeat center;
  background-size: cover;
}
.main_foot span {
  display: block;
  color: #000000;
  font-size: 25px;
  margin-top: 55px;
  margin-bottom: 15px;
}
.main_foot p {
  color: #000000;
  font-size: 18px;
  font-weight: 300;
}
</style>
